﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="layui/css/layui.css" media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<div class="demoTable">
    <button class="layui-btn" data-type="reload">添加</button>
</div>
<table class="layui-table" id="test" lay-filter="test">
</table>


<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-border-red layui-btn-xs" lay-event="delRow">删除</a>
</script>
<script src="layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
<script>
    layui.use('table', function () {
        var table = layui.table;
        var $ = layui.$;

        var tableId = 'test';

        $('.demoTable .layui-btn').on('click', function () {
            var oldDatas = layui.table.cache[tableId];
            if (oldDatas == undefined) {
                oldDatas = []
            }
            var newData = {};
            oldDatas.push(newData);

            table.reload(tableId, {
                data: oldDatas,
            })
        });


        var colsData =
            [
                [
                    {
                        "rowspan": "2",
                        "colspan": "1",
                        "field": "AAA",
                        "sort": true,
                        "edit": "text",
                        "title": "AAA"
                    },
                    {
                        "rowspan": "1",
                        "colspan": "3",
                        "sort": true,
                        "title": "BBB"
                    },
                    {
                        "rowspan": "2",
                        "sort": true,
                        "colspan": "1",
                        "field": "FFF",
                        "edit": "text",
                        "title": "FFF"
                    },
                    {
                        "rowspan": "2",
                        "colspan": "1",
                        "field": "GGG",
                        "sort": true,
                        "edit": "text",
                        "title": "GGG"
                    },
                    {
                        "rowspan": "2",
                        "colspan": "1",
                        "field": "HHH",
                        "edit": "text",
                        "sort": true,
                        "title": "HHH"
                    },
                    {
                        "rowspan": "1",
                        "colspan": "2",
                        "sort": true,

                        "title": "JJJ"
                    },
                    {
                        "rowspan": "2",
                        "colspan": "1",
                        "field": "QQQ",
                        "sort": true,

                        "edit": "text",
                        "title": "QQQ"
                    }
                ],
                [
                    {
                        "rowspan": null,
                        "sort": true,

                        "colspan": null,
                        "field": "CCC",
                        "edit": "text",
                        "title": "CCC"
                    },
                    {
                        "rowspan": null,
                        "sort": true,

                        "colspan": null,
                        "field": "DDD",
                        "edit": "text",
                        "title": "DDD"
                    },
                    {
                        "rowspan": null,
                        "colspan": null,
                        "sort": true,

                        "field": "EEE",
                        "edit": "text",
                        "title": "EEE"
                    },
                    {
                        "rowspan": null,
                        "colspan": null,
                        "field": "KKK",
                        "sort": true,

                        "edit": "text",
                        "title": "KKK"
                    },
                    {
                        "rowspan": null,
                        "colspan": null,
                        "sort": true,

                        "field": "LLL",
                        "edit": "text",
                        "title": "LLL"
                    }
                ]
            ]
        colsData[0].push({
            field: 'barDemo',
            align: 'center',
            fixed: 'right',
            title: '操作',
            rowspan: colsData.length,
            toolbar: '#barDemo',
            width: 80
        });

        table.render({
            elem: '#test'
            , autoSort: false
            , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            , data: []
            , cols: colsData

        });

        //监听行工具事件
        table.on('tool(test)', function (obj) {
            if (obj.event === 'delRow') {
                layer.confirm('真的删除行么', function (index) {
                    obj.del();
                    layer.close(index);
                });
            }
        });

        table.on('sort(test)', function (obj) {
            if (obj.type == null) {
                obj.type = 'asc'
            }
            table.reload('test', {
                initSort: obj //记录初始排序，如果不设的话，将无法标记表头的排序状态。
                , where: { //请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）
                    field: obj.field //排序字段
                    , order: obj.type //排序方式
                }
            });
        });

    });
</script>

</body>
</html>